<template>
	<view class="wrapper">
		<textarea placeholder="这一刻的想法…" v-model="text" />
		<view class="upload_box center fWrap flex-start">
			<view class="img_box" v-for="(val, index) in videos" :key="index">
				<video :src="val.oUrl" mode="aspectFill" @tap="previewImage(val.tUrl)"></video>
				<image src="../../static/find/delete.png" mode="aspectFill" class="delete" @tap="deleteImg(index)"></image>
			</view>
			<image src="../../static/find/upvideo.png" mode="aspectFill" @tap="chooseImg" v-if="videos.length==0"></image>
		</view>
		<view class="tab center" @tap="$open('./getAdress')">
			<image src="../../static/find/send01.png" mode="aspectFill" class="tab_logo"></image>
			<view class="f30 flex">所在位置{{ findAdress.location }}</view>
			<image src="../../static/arr_right.png" mode="aspectFill" class="arr_right"></image>
		</view>
		<!-- 		<view class="tab center"  @tap="$open('./canSee')">
			<image src="../../static/find/send02.png" mode="aspectFill" class="tab_logo"></image>
			<view class="f30 flex">谁可以看</view>
			<view class="f30 c666">公开</view>
			<image src="../../static/arr_right.png" mode="aspectFill" class="arr_right"></image>
		</view>
		<view class="tab center"  @tap="$open('./remindFriend')">
			<image src="../../static/find/send03.png" mode="aspectFill" class="tab_logo"></image>
			<view class="f30 flex">提醒谁看</view>
			<image src="../../static/arr_right.png" mode="aspectFill" class="arr_right"></image>
		</view> -->
		<view class="tab center" @tap="changeRadio">
			<image src="../../static/find/radio.png" mode="aspectFill" class="tab_logo" v-if="isAllowComment == 0"></image>
			<image src="../../static/find/isradio.png" mode="aspectFill" class="tab_logo" v-if="isAllowComment == 1"></image>
			<view class="f30">禁止Ta人评论</view>
			<view class="f22 c999 flex">勾选后ta人不可评论此条说说</view>
		</view>
		<view class="bottom center"><view class="btn center cfff" @tap="msgAdd">发布</view></view>
	</view>
</template>

<script>
import { uploadUrl } from '../../common/config.js';
export default {
	data() {
		return {
			text: '',
			findAdress: '',
			isAllowComment: 0,
			videos:[]
		};
	},
	onShow() {
		this.findAdress = getApp().globalData.findAdress;
	},
	onLoad() {},
	methods: {
		changeRadio() {
			this.isAllowComment == 0 ? (this.isAllowComment = 1) : (this.isAllowComment = 0);
		},
		// 删除图片
		deleteImg(index) {
			this.videos.splice(index, 1);
		},
		// 确认发送
		msgAdd() {
			if (this.text == '' && this.videos.length == 0) {
				return;
			}
			let parems = {
				flag: 3, //1=求职消息；2=招聘消息；3=普通消息；
				visible: 1, //0=不可见；1=朋友可见；2=粉丝可见；3=所有人可见
				type: this.videos.length == 0 ? 1 : 4, //1=文字；2=图片；3=语音；4=视频；5=图片、
				text: this.text,
				isAllowComment: this.isAllowComment, // 1禁止他人评论
				location: this.findAdress.location,
				latitude: this.findAdress.latitude,
				longitude: this.findAdress.longitude,
				cityId: 320300,
				videos: JSON.stringify(this.videos)
			};
			if (this.videos.length == 0) {
				delete parems.videos;
			}
			if (this.findAdress.location == '') {
				delete parems.location;
				delete parems.latitude;
				delete parems.longitude;
			}
			this.$ajax(this.apiList.msgAdd, parems, 'GET').then(res => {
				this.$back();
			});
		},
		previewImage(url) {
			uni.previewImage({
				urls: [url]
			});
		},
		// 上传视频
		chooseImg() {
			let that = this;
			uni.chooseVideo({
				count: 1,
				sizeType: ['compressed'],
				success: res => {
					uni.showLoading({
						title:'正在上传中'
					})
					const tempFilePaths = res.tempFilePath;
					uni.uploadFile({
						url: uploadUrl + this.apiList.uploadImage,
						filePath: tempFilePaths,
						name: 'file',
						success: uploadFileRes => {
							uploadFileRes.data = JSON.parse(uploadFileRes.data).data.videos;
							that.videos.push({
								oUrl: uploadFileRes.data[0].oUrl,
								size:res.size,
								length:parseInt(res.duration)
							});
							uni.hideLoading()
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.bottom {
	position: fixed;
	background: #ffffff;
	width: 100%;
	height: 98rpx;
	left: 0;
	bottom: 0;
	.btn {
		background: #0297fe;
		width: 700rpx;
		height: 80rpx;
		border-radius: 4rpx;
	}
}
.tab {
	height: 103rpx;
	line-height: 103rpx;
	overflow: hidden;
	.c999 {
		padding-left: 21rpx;
	}
	.flex,
	.f30 {
		border-bottom: 1rpx solid #e0e0e0;
		height: 103rpx;
	}
	.arr_right {
		width: 30rpx;
		height: 30rpx;
		margin: 0 20rpx;
	}
	.tab_logo {
		width: 45rpx;
		height: 45rpx;
		margin: 0 24rpx 0 35rpx;
		border-radius: 50%;
	}
}
.upload_box {
	margin: 0 39rpx;
	padding-bottom: 38rpx;
	border-bottom: 1rpx solid #e0e0e0;
	.delete {
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		top: -10rpx;
		right: -10rpx;
	}
	.img_box {
		position: relative;
	}
	video,image {
		width: 210rpx;
		height: 210rpx;
		&:not(:nth-of-type(3n)) {
			margin-right: 14rpx;
		}
	}
}
textarea {
	margin: 34rpx 41rpx;
	height: 150rpx;
}
page {
	background: #f3f3f3;
}
</style>
